import { Carousel } from "antd";
import { useState, useEffect } from "react";
import { getBanner } from "../../views/tools/ajax";
const contentStyle = {
  margin: 0,
  width: "1200px",
  height: "400px",
  color: "#fff",
  lineHeight: "400px",
  textAlign: "center",
  background: "#364d79",
  margin: "0 auto",
};
const App = () => {
  const onChange = (currentSlide) => {
    // console.log(currentSlide);
  };
  let [banner, setBanner] = useState([]);
  async function aa() {
    let res = await getBanner();
    banner = res.data.data;
    setBanner([...banner]);
    console.log(banner);
  }
  useEffect(() => {
    aa();
  }, []);
  return (
    <Carousel autoplay afterChange={onChange}>
      {banner.map((item) => {
        return (
          <div key={item}>
             <h3 style={contentStyle}>
            <img src={item} alt="" />
             </h3>
          </div>
        );
      })}
    </Carousel>
  );
};
export default App;
